@import './mixins';
@import './function';
// 工具类名统一前缀
$prefix: starter;

$color-theme: rgba(64, 158, 255, 1);
// Theme colors
$primary-color: #409eff;

// 间距
$spacer: 8px;
$spacer-s: calc($spacer * 0.5);
$spacer-l: calc($spacer * 1.5);
$spacer-1: $spacer;
$spacer-2: calc($spacer * 2);
$spacer-3: calc($spacer * 3);
$spacer-4: calc($spacer * 4);
$spacer-5: calc($spacer * 5);
$spacer-6: calc($spacer * 6);
$spacer-7: calc($spacer * 7);
$spacer-8: calc($spacer * 8);
$spacer-9: calc($spacer * 9);
$spacer-10: calc($spacer * 10);

// 字号
$font-size: 10px;
$font-size-s: calc($font-size * 1.2);
$font-size-base: calc($font-size * 1.4);
$font-size-l: calc($font-size * 1.6);
$font-size-xl: calc($font-size * 2);
$font-size-xxl: calc($font-size * 3.6);

// 行高
$line-height: 1.5;
$line-height-s: 20px;
$line-height-base: 22px;
$line-height-l: 24px;
$line-height-xl: 28px;
$line-height-xxl: 44px;

// 圆角
$border-radius: 4px;
$border-radius-50: 50%;

.notificationBox {
  --el-notification-width: 330px;
  --el-notification-padding: 14px 26px 14px 13px;
  --el-notification-radius: 8px;
  --el-notification-shadow: var(--el-box-shadow-light);
  --el-notification-border-color: var(--el-border-color-lighter);
  --el-notification-icon-size: 24px;
  --el-notification-close-font-size: var(--el-message-close-size, 16px);
  --el-notification-group-margin-left: 13px;
  --el-notification-group-margin-right: 8px;
  --el-notification-content-font-size: var(--el-font-size-base);
  --el-notification-content-color: var(--el-text-color-regular);
  --el-notification-title-font-size: 16px;
  --el-notification-title-color: var(--el-text-color-primary);
  --el-notification-close-color: var(--el-text-color-secondary);
  --el-notification-close-hover-color: var(--el-text-color-regular);
}
.notificationBox {
  display: flex;
  width: var(--el-notification-width);
  padding: var(--el-notification-padding);
  border-radius: var(--el-notification-radius);
  box-sizing: border-box;
  border: 1px solid var(--el-notification-border-color);
  position: fixed;
  background-color: var(--el-bg-color-overlay);
  box-shadow: var(--el-notification-shadow);
  transition: opacity var(--el-transition-duration), transform var(--el-transition-duration),
    left var(--el-transition-duration), right var(--el-transition-duration), top 0.4s,
    bottom var(--el-transition-duration);
  overflow-wrap: anywhere;
  overflow: hidden;
  z-index: 9999;
}
.notificationBox.right {
  right: 16px;
}
.notificationBox.left {
  left: 16px;
}
.notificationBox__group {
  margin-left: var(--el-notification-group-margin-left);
  margin-right: var(--el-notification-group-margin-right);
}
.notificationBox__title {
  font-weight: 700;
  font-size: var(--el-notification-title-font-size);
  line-height: var(--el-notification-icon-size);
  color: var(--el-notification-title-color);
  margin: 0;
}
.notificationBox__content {
  font-size: var(--el-notification-content-font-size);
  line-height: 24px;
  margin: 6px 0 0;
  color: var(--el-notification-content-color);
  text-align: justify;
}
.notificationBox__content p {
  margin: 0;
}
.notificationBox .el-notification__icon {
  height: var(--el-notification-icon-size);
  width: var(--el-notification-icon-size);
  font-size: var(--el-notification-icon-size);
}
.notificationBox .notificationBox__closeBtn {
  position: absolute;
  top: 18px;
  right: 15px;
  cursor: pointer;
  color: var(--el-notification-close-color);
  font-size: var(--el-notification-close-font-size);
}
.notificationBox .el-notification__closeBtn:hover {
  color: var(--el-notification-close-hover-color);
}
.notificationBox-fade-enter-from.right {
  right: 0;
  transform: translateX(100%);
}
.notificationBox-fade-enter-from.left {
  left: 0;
  transform: translateX(-100%);
}
.notificationBox-fade-leave-to {
  opacity: 0;
}
